<template>
  <div id="nav">
    <router-link :to="item.to" :class="{ active: item.to == Index }" v-for="(item, index) in path" :key="index">
      <span :class="item.class" v-if="index != 2"></span>
      <span :class="item.class" v-else>
        <van-badge :content="cartCount">
        </van-badge>
      </span>
      <!--      <span :class="{bage:index==2}" v-if="index==2">{{cartCount}}</span>-->
      {{ item.title }}
    </router-link>
  </div>
  <router-view />
</template>
<script>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import store from '@/store/index'
export default {
  setup() {
    const Index = ref('/home')
    const route = useRoute()
    const path = reactive([
      { to: '/home', title: '首页', class: "iconfont icon-shouye" },
      { to: '/category', title: '分类', class: "iconfont icon-fenlei" },
      { to: '/shopCart', title: '购物车', class: "iconfont icon-gouwuche" },
      { to: '/profile', title: '我的', class: "iconfont icon-wode" }
    ])
    watch(route, () => {
      Index.value = route.path
    })
    const cartCount = computed(() => {
      return store.state.cart.cartNum
    })
    onMounted(() => {
      store.dispatch('updateCart')
    })
    return {
      Index,
      path,
      cartCount
    }
  }
}
</script>
<style lang="less" scoped>
#nav {
  background-color: #F6F6F6;
  height: 50px;
  font-size: 14px;
  text-align: center;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 -3px 1px rgba(100, 100, 100, 0.1);
  align-items: center;
  vertical-align: text-top;
  z-index: 999;
}

a {
  flex: 1;
  flex-wrap: wrap;
  color: #2c3e50
}

.iconfont {
  display: block;
}

.active {
  color: red
}

::v-deep .van-badge--top-right {
  position: relative;
  top: 0;
  right: 8px;
}</style>
